<template>
  <div>
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="78px" size="small"
      @submit.native.prevent>
      <div class="record-title">女性盆底健康中心 盆底功能诊断报告单</div>
      <div class="patient-info">
        <div class="info-row">
          <span class="info-item">
            患者姓名：<span class="underline">123</span>
          </span>
          <span class="info-item">
            年龄：<span class="underline">123</span>
          </span>
          <span class="info-item">
            手机号：<span class="underline">123</span>
          </span>
        </div>
      </div>
      <div class="instructions center">
        <p class="limark">一、盆底功能检查</p>
        <div class="table-container">
          <table class="table-layout center">
            <tbody>
              <tr>
                <td class="table-cell">检查项目
                </td>
                <td class="table-cell">正常范围
                </td>
                <td class="table-cell">检查结果
                </td>
              </tr>
              <tr>
                <td class="table-cell">牛津肌力检测
                </td>
                <td class="table-cell">肌力<br>
                  I类肌（持久收缩）：4-5级<br>
                  II类肌（快速收缩）：4-5级<br>
                  盆底肌与腹肌收缩协调性：协调
                </td>
                <td class="table-cell">肌力<br>
                  I类肌： 级<br>
                  II类肌： 级<br>
                  盆底肌与腹肌收缩协调性：
                  <el-radio-group v-model="formData.checkbox34">
                    <el-radio v-for="(item, index) in checkbox34ptions" :key="index" :label="item.value"
                      :disabled="item.disabled" style="display: inline;">{{
                        item.label }}</el-radio>
                  </el-radio-group>
                </td>
              </tr>
              <tr>
                <td class="table-cell">尿失禁
                  情况
                </td>
                <td class="table-cell" colspan="2">
                  <el-radio-group v-model="formData.checkbox12">
                    <el-radio v-for="(item, index) in checkbox12ptions" :key="index" :label="item.value"
                      :disabled="item.disabled" style="display: inline;">{{
                        item.label }}</el-radio>
                  </el-radio-group>
                </td>
              </tr>
              <tr>
                <td class="table-cell">其他
                </td>
                <td class="table-cell" colspan="2">盆底肌痉挛（左 分 右 分）
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <p class="limark" style="margin-top: 20px;">二、建议指导</p>
        <el-form-item prop="checkbox109091" class="label-right-align" label-width="0">
          <el-checkbox-group v-model="formData.checkbox109091">
            <el-checkbox v-for="(item, index) in checkbox109091Options" :key="index" :label="item.value"
              :disabled="item.disabled" style="display: block;margin-left: 30px;font-size: 18px;">{{
                item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <p class="limark">三、温馨提示</p>
        <ol style="list-style-type: none;">
          <li>①建议勿穿束缚带或束身内衣；</li>
          <li>②控制饮用：茶、咖啡、有汽的饮料；</li>
          <li>③不宜长期蹲、站、提重物；</li>
          <li>④保持大便通畅。</li>
        </ol>
        <p class="limark" style="margin-top: 20px;"> 四、咨询电话：0578-5018860（国医馆-1楼盆底康复中心）</p>
      </div>
      <div class="patient-info" style="margin-bottom:50px ;">
        <div class="info-row">
          <span class="info-item">
            检查者签名：<span class="underline">123</span>
          </span>
          <span class="info-item">
            检查日期：<span class="underline">123</span>
          </span>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      formData: {
        checkbox109091: [4],
        checkbox12: 1,
        checkbox34: 2,
      },
      checkbox109091Options: [{
        "label": "盆底门诊随访，复查盆底功能；",
        "value": 1
      }, {
        "label": "盆底电生理康复治疗；",
        "value": 2
      }, {
        "label": "盆底肌痉挛治疗；",
        "value": 3
      }, {
        "value": 4,
        "label": "腹直肌分离修复加手法按摩治疗；"
      }, {
        "value": 5,
        "label": "家庭盆底康复训练器（阴道哑铃）；"
      }, {
        "value": 6,
        "label": "坚持每天Kege1 训练，每天坚持150-200次；"
      }, {
        "value": 7,
        "label": "建议手术。"
      }],
      checkbox12ptions: [{
        "label": "有",
        "value": 1
      }, {
        "label": "无",
        "value": 2
      },],
      checkbox34ptions: [{
        "label": "协调",
        "value": 1
      }, {
        "label": "不协调",
        "value": 2
      },]
    }
  },
  methods: {
  },
}
</script>
<style lang="scss" scoped>
.center {
  width: 80%;
  margin: 0 auto;
}

.record-title {
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.patient-info {
  text-align: center;
  margin-top: 20px;
}

.info-row {
  display: inline-block;
  padding-bottom: 15px;
}

.info-item {
  display: inline-block;
  margin: 0 20px;
  font-size: 16px;
  color: #333;
}

.underline {
  display: inline-block;
  min-width: 120px;
  border-bottom: 1px solid #666;
  margin-left: 8px;
  text-decoration: none;
}

.instructions {
  font-size: 18px;
  line-height: 1.6;
  padding: 20px;
  border-radius: 5px;
}

.instructions p {
  margin-bottom: 10px;
}

.instructions ol {
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 10px;
}

.limark {
  font-weight: bold;
}

div.table-container {
  table.table-layout {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;

    td.table-cell {
      display: table-cell;
      height: 38px;
      border: 1px solid #333;
      font-size: 16px;
      overflow-wrap: break-word;
    }
  }
}

/deep/ .el-checkbox__label {
  font-size: 18px;
}
/deep/.table-container .el-checkbox__label {
  font-size: 15px;
}
</style>
